<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调查问卷问题表</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/questioniar.css">
</head>

<body>

    <div id="questionair" style="text-align: center;">

        <div id="topic">


            <h3>{{topic}}</h3>
        </div>

        <div style="border-style: dashed;height:1px;width: 100rem; color:#e3f2fd; margin-left: 100px;">

        </div>
        <div id="content">


            <div id="one">
                <ul>
                    <li>
                        1.{{questionOne}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerOne">
                    </li>
                </ul>

            </div>
            <div id="two">
                <ul>
                    <li>
                        2.{{questionTwo}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerTwo">
                    </li>
                </ul>
            </div>
            <div id="three">
                <ul>
                    <li>
                        3.{{questionThree}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerThree">
                    </li>
                </ul>
            </div>
            <div id="four">
                <ul>
                    <li>
                        4.{{questionFour}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerFour">
                    </li>
                </ul>
            </div>
            <div id="five">
                <ul>
                    <li>
                        5.{{questionFive}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerFive">
                    </li>
                </ul>
            </div>
            <div id="six">
                <ul>
                    <li>
                        6.{{questionSix}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerSix">
                    </li>
                </ul>
            </div>
            <div id="seven">
                <ul>
                    <li>
                        7. {{questionSeven}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerSeven">
                    </li>
                </ul>
            </div>
            <div id="eight">
                <ul>
                    <li>
                        8.{{questionEight}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerEight">
                    </li>
                </ul>
            </div>
            <div id="nine">
                <ul>
                    <li>
                        9.{{questionNine}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerNine">
                    </li>
                </ul>
            </div>
            <div id="ten">
                <ul>
                    <li>
                        10.{{questionTen}}
                    </li>
                    <li>
                        <input type="text" placeholder="输入评分分数" id="answerTen">
                    </li>
                </ul>
            </div>

        </div>
        <div>
            &nbsp;&nbsp;

            <div class="alert alert-light text-center invisible" role="alert">

                <font id="msgId"></font> <small id="comment" class="form-text text-muted">{{msg}}</small>
            </div>




            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="hh()">返回</button>
            &nbsp;&nbsp;
            <button type="submit" class="btn btn-primary" data-dismiss="modal" onclick="fillIn('{{QSId}}')">提交</button>
        </div>
    </div>

    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script>

        //跳转到我的调查问卷
        function hh() {
            window.location.href = '/all';
        }

        //填写调查问卷
        function fillIn(QSId) {


            var reg = /^(?:0|[1-9]|10)$/;
            var oneAnswer = $('#answerOne').val();
            if (oneAnswer === "" || reg.test(oneAnswer) === false) {
                alert_fn("所有答案不能为空或超出1~10")
            } else {
                var twoAnswer = $('#answerTwo').val();
                if (twoAnswer === "" || reg.test(twoAnswer) === false) {
                    alert_fn("所有答案不能为空或超出1~10")
                } else {
                    var threeAnswer = $('#answerThree').val();
                    if (threeAnswer === "" || reg.test(threeAnswer) === false) {
                        alert_fn("所有答案不能为空或超出1~10")
                    }
                    else {
                        var fourAnswer = $('#answerFour').val();
                        if (fourAnswer === "" || reg.test(fourAnswer) === false) {
                            alert_fn("所有答案不能为空或超出1~10")
                        } else {
                            var fiveAnswer = $('#answerFive').val();
                            if (fiveAnswer === "" || reg.test(fiveAnswer) === false) {
                                alert_fn("所有答案不能为空或超出1~10")
                            } else {
                                var sixAnswer = $('#answerSix').val();
                                if (sixAnswer === "" || reg.test(sixAnswer) === false) {
                                    alert_fn("所有答案不能为空或超出1~10")
                                } else {
                                    var sevenAnswer = $('#answerSeven').val();
                                    if (sevenAnswer === "" || reg.test(sevenAnswer) === false) {
                                        alert_fn("所有答案不能为空或超出1~10")
                                    } else {
                                        var eightAnswer = $('#answerEight').val();
                                        if (eightAnswer === "" || reg.test(eightAnswer) === false) {
                                            alert_fn("所有答案不能为空或超出1~10")
                                        } else {
                                            var nineAnswer = $('#answerNine').val();
                                            if (nineAnswer === "" || reg.test(nineAnswer) === false) {
                                                alert_fn("所有答案不能为空或超出1~10")
                                            } else {
                                                var tenAnswer = $('#answerTen').val();
                                                if (tenAnswer === "" || reg.test(tenAnswer) === false) {
                                                    alert_fn("所有答案不能为空或超出1~10")
                                                } else {
                                                    axios({
                                                        method: 'post',
                                                        url: '/qustionair',

                                                        data: {
                                                            QSId,

                                                            oneAnswer,
                                                            twoAnswer,
                                                            threeAnswer,
                                                            fourAnswer,
                                                            fiveAnswer,
                                                            sixAnswer,
                                                            sevenAnswer,
                                                            eightAnswer,
                                                            nineAnswer,
                                                            tenAnswer


                                                        }
                                                    }).then(function (response) {
                                                        // axios工具下，服务器真正返回的数据在返回对象的data中
                                                        let res = response.data;
                                                        if (res.code === 200) {
                                                            window.location.href = '/all'
                                                        }
                                                    })

                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }


        }
        //包装消息警告框(显示和隐藏)
        function alert_fn(msg) {
            $('#msgId').text(msg);
            $('.alert').removeClass('invisible');
            setTimeout(() => {
                $('.alert').addClass('invisible');
            }, 3000);
        }
    </script>
    </script>
</body>

</html>